.t-demo {
}

@mixin fixed-column-left-shadow {
  padding-right: 8px !important;
  box-shadow: rgba(0, 0, 0, 0.15) 1px 0px 0px;
}

.t-datagrid-container {
  position: relative;
}

.tr-edit-table {
  box-shadow: none;
  .selectionBox {
    text-align: center;
  }

  .columnsFilter
    .tr-select-big
    .q-field--focused
    .q-field__inner
    .q-field__control {
    border: 1px solid var(--t-color);
    box-shadow: 0 0 3px rgba(var(--t-color-rgb), 0.6);
  }

  .select-tabindex .q-field--highlighted {
    border: 1px solid var(--t-color);
    box-shadow: 0 0 3px rgba(var(--t-color-rgb), 0.6);
  }

  .q-table__bottom.row {
    color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
    .q-table__bottom-item,
    .q-field__native.row.items-center {
      color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
    }
  }

  .q-checkbox--dense .q-checkbox__bg {
    width: 14px;
    height: 14px;
    left: 15%;
    top: 15%;
  }

  .q-table th,
  .q-table tbody th {
    font-size: 12px;
    color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
  }
  .q-table tbody td {
    font-size: 14px;
    color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
  }

  .q-table tbody td {
    &:before,
    &:after {
      background-color: transparent;
    }
  }

  .q-table thead tr th {
    background-color: var(--t-dg-th-bg);
    color: rgba(0, 0, 0, 0.56);
  }

  .q-table tbody tr:hover {
    // background-color: var(--t-color-hover) !important;
    background-color: var(--t-dg-hover) !important;
  }
  .q-table__bottom {
    font-size: 14px;
  }

  .q-table thead,
  .q-table tr,
  .q-table th,
  .q-table td {
    // border-color: var(--t-dg-th-bg);
    // border-color: rgba(241, 241, 241, 1);
    border-color: #f1f1f1;

    &:not(.q-table--col-auto-width) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .white-space-wrap {
    white-space: wrap !important;
  }

  &.white-space-wrap .q-table td {
    white-space: wrap !important;
  }

  &.allowColumnResizing .q-table td {
    width: 0px;
    max-width: 0px;

    &:first-child {
      width: unset;
      max-width: unset;
    }
  }

  .q-table thead tr:last-child th {
    // border-color: var(--t-dg-th-bg);
    // border-color: rgba(241, 241, 241, 1);
    border-color: var(--t-dg-th-border-color);
  }

  .q-table th.fixed-column-left,
  .q-table td.fixed-column-left {
    background-color: var(--t-dg-fixed-bg);
    position: sticky;
    left: 0;
    z-index: 99;
    border-bottom-width: 1px;
  }

  .q-table th.fixed-column-left {
    background-color: var(--t-dg-th-bg);
    z-index: 115 !important;
  }

  .q-virtual-scroll__content tr.selected {
    background-color: var(--t-color-selected);
  }

  .q-virtual-scroll__content tr:last-child td {
    border-bottom-width: 1px;
    // border-bottom-color: var(--t-dg-th-border-color);
  }

  .q-virtual-scroll__content tr td.fixed-column-left,
  .q-virtual-scroll__content tr td.sticky.right,
  .q-virtual-scroll__content tr td:first-child {
    background-color: var(--t-dg-fixed-bg);
    &:hover {
      background-color: var(--t-dg-hover);
    }
  }

  .q-virtual-scroll__content tr.selected td.fixed-column-left,
  .q-virtual-scroll__content tr.selected td.sticky.right,
  .q-virtual-scroll__content tr.selected td:first-child {
    /* 奇数行样式 */
    // background-color: rgba(var(--t-color-rgb), 0);
    background-color: var(--t-color-selected);
    &:hover {
      background-color: var(--t-dg-hover);
    }
  }

  .q-virtual-scroll__content tr:hover td.fixed-column-left,
  .q-virtual-scroll__content tr:hover td.sticky.right,
  .q-virtual-scroll__content tr:hover td:first-child {
    z-index: 105 !important;
    background-color: var(--t-dg-hover);
  }

  // .q-table th {
  //   z-index: 99;
  // }
  .q-table th.fixed-column-right,
  .q-table td.fixed-column-right {
    // background-color: #00b4ff;
    background-color: var(--t-dg-fixed-bg);
    // background-color: inherit;
    position: sticky;
    right: 0;
    z-index: 99;
  }

  &.selection .q-table th:first-child,
  &.selection .q-table td:first-child {
    background-color: var(--t-dg-fixed-bg);
    // background-color: inherit;
    position: sticky;
    left: 0;
    z-index: 99;

    min-width: 50px;
    white-space: initial;
    overflow: initial;
    text-overflow: initial;
  }

  &.selection .q-table td.checkbox-filter {
    border-bottom-width: 1px;
    z-index: 110;
  }

  &.selection .q-table th:first-child {
    z-index: 115 !important;
    background-color: var(--t-dg-th-bg);
  }

  .fixed-column-left-shadow {
    @include fixed-column-left-shadow;
  }

  .fixed-column-right-shadow {
    box-shadow: rgba(0, 0, 0, 0.15) -1px 0px 0px;
  }

  tbody tr.columnsFilter td {
    top: 48px;

    &.fixed-column-left {
      z-index: 115 !important;
    }

    &.fixed-column-left-shadow {
      @include fixed-column-left-shadow;
    }
  }

  /* this is when the loading indicator appears */
  &.q-table--loading thead tr:last-child th {
    /* height of all previous header rows */
    // top: 48px; /*注释掉是因为loading时 表头下移了*/
  }

  /* prevent scrolling behind sticky top row on focus */
  tbody {
    /* height of all previous header rows */
    scroll-margin-top: 48px;
  }

  .cmdColumn_btngroup {
    .t-button {
      min-width: auto;
      padding-left: 0px !important;
      padding-right: 0px !important;
    }

    .q-btn-dropdown {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
  }

  &.scrollbar-hover-visible {
    .q-virtual-scroll {
      scrollbar-width: none; /* For Firefox */
      -ms-overflow-style: none; /* For Internet Explorer and Edge */
      &::-webkit-scrollbar {
        // width: 4px;
        // height: 4px;
        background-color: transparent;

        // &:hover {
        //   width: 8px;
        //   height: 8px;
        // }
      }

      &::-webkit-scrollbar-thumb {
        background: #d9d9d9;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: #d9d9d9;
      }

      &:hover {
        scrollbar-width: auto; /* For Firefox */
        -ms-overflow-style: auto; /* For Internet Explorer and Edge */
        &::-webkit-scrollbar {
          width: 8px;
          height: 8px;
          background-color: transparent;

          &:hover {
            &:horizontal {
              height: 8px;
              background-color: transparent;
            }

            &:vertical {
              width: 8px;
              background-color: transparent;
            }
          }
        }
      }
    }
  }
}
.tr-edit-table .header-tips div {
  display: inline-block;
}
.thfixed {
  position: sticky;
  top: 0;
  z-index: 1;
}
.tdfixed {
  th:last-child,
  td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: #fff;
    border-left: #f1f1f1 1px solid;
  }
}
.tr-edit-table .q-table__bottom--nodata {
  border-top: none;
}
.tr-edit-table .q-td .tr-input-noborder .q-field{
  border: none!important;
  background-color: rgba(0, 0, 0, 0)!important;
  .q-field__control{
    background-color: rgba(0, 0, 0, 0)!important;
  }
}
